<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :autoBack="true" height="90" bgColor="#0081ff" leftIconSize="32" leftIconColor="#ffffff">
			<view class="u-nav-slot margin-top-xl flex" slot="left">
				<u-icon name="arrow-left" size="32" color="#ffffff"></u-icon>
			</view>
			<view slot="center" class="u-nav-slot margin-top-xl "
				style="display: flex; flex-direction: column;align-items: center;">
				<view style=" font-size: 16px;">编辑</view>
			</view>
			<view class="u-nav-slot margin-top-xl flex" slot="right">
				<u-icon name="checkbox-mark" size="32" color="#FFFFFF" @tap="save"></u-icon>
			</view>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef H5 || APP -->
		<u-navbar :autoBack="true" height="60" bgColor="#0081ff" leftIconSize="32" leftIconColor="#ffffff">
			<view class="u-nav-slot margin-top-xl flex" slot="left">
				<u-icon name="arrow-left" size="32" color="#ffffff"></u-icon>
			</view>
			<view slot="center" class="u-nav-slot margin-top-xl "
				style="display: flex; flex-direction: column;align-items: center;">
				<view style=" font-size: 16px;">编辑</view>
			</view>
			<view class="u-nav-slot margin-top-xl flex" slot="right">
				<u-icon name="checkbox-mark" size="32" color="#FFFFFF" @tap="save"></u-icon>
			</view>
		</u-navbar>
		<!-- #endif -->
		<view class="margin-sm text-xl">样式</view>

		<view style="display: flex; justify-content: center;align-items: center;">
			<but-comp v-if="type == 1" :item="button" :foot="false"></but-comp>
			<data-gauge v-if="type == 2" :item="number" :foot="false"></data-gauge>
			<data-line v-if="type == 3" :item="number" :foot="false" ></data-line>
		</view>
		<view class="margin-sm text-xl">参数设置</view>


		<!-- 按钮 -->
		<view v-if="type == 1" class="margin-sm">
			<view class="cu-form-group">
				<view class="title">名称：</view>
				<input v-model="button.buttonName"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">数据项：</view>
				<input v-model="button.subscribe"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">开指令：</view>
				<input v-model="button.open"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">关指令：</view>
				<input v-model="button.off"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">显示图标：</view>
				<button class="cu-btn" @tap="setIcon">修改图标</button>
			</view>
		</view>

		<!-- 数据-->
		<view v-else class="margin-sm">
			<view class="cu-form-group">
				<view class="title">名称：</view>
				<input v-model="number.numName"></input>
			</view>

			<view class="cu-form-group">
				<view class="title">数据项：</view>
				<input v-model="number.subscribe"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">数据单位：</view>
				<input v-model="number.unit"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">数据联动：</view>
				<button class="cu-btn" color="red" @tap="toAddExecute()">联动设置</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: null,
				id: null,
				button: {
					buttonName: null,
					subscribe: null,
					open: null,
					off: null
				},
				number: {
					"image": null,
					"numId": null,
					"numName": null,
					"subscribe": null,
					"unit": null,
				}
			}
		},
		onLoad(option) {
			this.type = option.type
			this.id = option.id
			if (option.type == 1) {
				this.getButton(option.id)
			} else {
				this.getNumber(option.id)
			}
		},
		onShow() {
			if (this.type == 1) {
				this.getButton(this.id)
			}else {
				this.getNumber(this.id)
			}
		},
		methods: {
			setIcon() {
				uni.navigateTo({
					url: '../image/icon?id=' + this.id + "&type=" + this.type
				})
			},
			toAddExecute() {
				uni.navigateTo({
					url: '../linkage/addLinkage'
				})
			},
			save() {
				if (this.type == 1) {
					this.updateButton()
				}else {
					this.updateNumber()
				}
			},
			// 更新按钮信息
			updateButton() {
				let that = this
				that.$http.request({
					url: 'app/button/update',
					method: 'POST',
					data: {
						"buttonId": that.id,
						"buttonName": that.button.buttonName,
						'subscribe': this.button.subscribe,
						"open": that.button.open,
						"off": that.button.off
					},
					success: (data) => {
						if (data.data && data.data.code == 0) {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
			},
			// 更新数据信息
			updateNumber() {
				let that = this
				that.$http.request({
					url: 'app/number/update',
					method: 'POST',
					data: {
						"numId": that.id,
						"numName": that.number.numName,
						'subscribe': that.number.subscribe,
						"unit": that.number.unit,
					},
					success: (data) => {
						if (data.data && data.data.code == 0) {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
			},
			//获取按钮信息
			getButton(id) {
				this.$http.request({
					url: 'app/button/info/' + id,
					method: 'GET',
					success: (data) => {
						if (data.data && data.data.code == 0) {
							this.button = data.data.button
						}
					}
				})
			},
			//获取按钮信息
			getNumber(numId) {
				this.$http.request({
					url: 'app/number/info/' + numId,
					method: 'GET',
					success: (data) => {
						if (data.data && data.data.code == 0) {
							this.number = data.data.number
						}
					}
				})
			},
		}
	}
</script>

<style>

</style>
